<template>
    <!--我的-->
    <div style="padding-top: 44px;">
        <van-nav-bar
                :fixed="fixed"
                title="我的"
        />
        <div class="sign" style="text-align: center">
            <div style="width: 100%;margin: 0 auto">
                    <span>
                        <img src="../../static/headicon.png" v-if="user.avatar==''"
                             style="width: 80px;height: 80px;border-radius: 50px;
                             border: 1px solid #ffffff;
                             background-color: #ffffff;box-shadow: 0px 0px 10px #ddd;
                             margin-top: 25px"/>
                        <img :src="'http://api.yyw66.cn/upload/'+user.avatar" v-if="user.avatar!=''"
                             style="width: 80px;height: 80px;border-radius: 50px;
                             border: 1px solid #ffffff;
                             background-color: #ffffff;box-shadow: 0px 0px 10px #ddd;
                             margin-top: 25px"
                        />
                    </span>
            </div>
            <div style="width: 100%;">
                <div style="margin-top: 10px">
                    <span v-if="user.user_nickname==''">{{user.mobile}}</span>
                    <span v-if="user.user_nickname!=''">{{user.user_nickname}}</span>
                </div>
            </div>
        </div>
        <!--个人信息-->
        <div>
            <van-cell-group>
                <van-cell icon="records" title="修改登录密码" is-link to="/verification"/>
                <van-cell icon="location" title="地址管理" is-link to="/address"/>
                <van-cell icon="sign" title="支付密码设置" is-link to="/setpassword"/>
                <!--<van-cell icon="cart" title="我的订单" is-link  to="/myisorder" />-->
                <!--<van-cell icon="cart" title="我的邀请订单" is-link  to="/myorder" />-->
                <van-cell icon="exchange" title="签到查询" is-link to="/sginquery"/>
                <van-cell icon="edit-data" title="修改信息" is-link to="/setuserinfo"/>
                <van-cell icon="contact" title="我的邀请用户" is-link to="/invitationuser"/>
                <!--<van-cell icon="points" title="我的工资" is-link to="/mebonus"/>-->
                <van-cell-group>
                    <van-cell icon="info-o" title="当前版本号" value="1.0.4"/>
                </van-cell-group>
                <!--<van-cell icon="shop" title="关于我们" is-link   to="/about"/>-->
            </van-cell-group>
        </div>
        <!--<van-cell icon="gold-coin" title="修改支付密码" is-link  to="/newpassword"/>-->
        <div :style="{padding:'10px',marginBottom:'50px'}">
            <van-button size="large" @click="Log" type="danger">退出登录</van-button>
        </div>
        <bottom tab="my"></bottom>
    </div>
</template>

<script>
    import {getBase64Image} from '../utils/phto.js'
    import bottom from '@/pages/bottom'
    import {LogOut} from "../api/data";
    import {Row, Col, Icon, Cell, CellGroup} from 'vant';
    import {UserInfo} from "../api/data";

    export default {
        data() {
            return {
                fixed: true,
                type: false,
                user: {
                    avatar: ''
                }
            }
        },
        components: {
            bottom,
            [Row.name]: Row,
            [Col.name]: Col,
            [Icon.name]: Icon,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup
        },
        // computed:{
        //     token:function () {
        //         return this.$store.state.token
        //     }
        // },
        methods: {
            photo: function () {

                this.type = true;
            },
            Task: function () {
                this.type = true;
            },
            TaskClick: function (last) {
                this.type = false;
            },
            Log() {
                LogOut().then(res => {
                    console.log(res.data)
                    localStorage.removeItem('token')
                    this.$router.push({
                        path: `/login`
                    })
                })
            },
            meSign() {
                this.$router.push({
                    path: `/login`
                })
            }
        },
        mounted() {
            //相册
            var DigitalGallery        = document.getElementById('Digital-GalleryS');
            //拍照
            var Digitalphotograph     = document.getElementById('Digital-photographS');
            Digitalphotograph.onclick = function () {
                //拍照的函数

                appendByCamera()
            }

            DigitalGallery.onclick = function () {
                //调取本地相册

                appendByGallery()

            }
            //拍照上传进行调用
            // personalbar.personalbar()
            function appendByCamera() {
                //创建Image对象
                var imgsome = new Image();
                //调取本地相机进行拍摄
                plus.camera.getCamera().captureImage(function (e) {
                    //拍完照的代码放到自己本地相册里
                    plus.io.resolveLocalFileSystemURL(e, function (entry) {
                        //曾到本地相册里
                        var path = entry.toLocalURL();

                        //截取最后一个位置的图片不如这样123.jpg
                        var sname      = path.split('/').pop();
                        // 传过来的图片路径在这里用。
                        imgsome.src    = path;
                        var strPath;
                        var rctype     = 5000;
                        // var teskd=localStorage.getItem('id');
                        var title;
                        //进行图片加载 //里面的代码不能有修改否则将图片会传入失败
                        imgsome.onload = function () {
                            //进行再图片加载执行截取截取最后一个位置的图片
                            title = sname;
                            console.log(title)
                            //把拍完照的图片转化base64位图片
                            strPath = getBase64Image.getBase64Image(imgsome.src);
                            // 调用ajax接口 用formData传递值传给ajax
                            //    var formData = new FormData()
                            //    formData.append("image",strPath);//base64位编码
                            //    formData.append("imgName",title);//截取最后一个位置的图片
                            //    formData.append("recId",teskd);//传入登录信息的id
                            //    formData.append("recType",rctype);//rctype传入5000
                            //封装的函数进行传参
                            //    album(formData).then((response)=>{

                            //    if(response.data.code==1){

                            //   }


                            //   }).catch(function(error){
                            //     console.log("错误：" + JSON.stringify(err))
                            //   })
                        }
                    });
                });
                //进行拍摄
                plus.nativeUI.closeWaiting();
            }

            function appendByGallery() {
                //调取本地相册上传
                plus.gallery.pick(function (path) {
                    appendFile(path)
                });
            }

            var imgPath;
            var tesk;
            var image;
            var imgName;

            function appendFile(path) {
                //创建Image对象
                var img   = new Image();
                //截取最后一个位置的图片不如这样123.jpg
                var name  = path.split('/').pop();
                img.src   = path; // 传过来的图片路径在这里用。
                var teskd = localStorage.getItem('id');//获取id
                var lked  = 5000;//rctype传入5000
                console.log(tesk);
                img.onload = function () {
                    imgPath = getBase64Image.getBase64Image(img.src);//64位编码处理
                    tesk    = name; //图片的路劲
                    console.log(tesk);//图片的后位置
                    console.log(imgPath);//base64位编码
                    //你的ajax调用
                    //    var formData = new FormData();
                    //    formData.append("image",imgPath);//64位编码处理
                    //    formData.append("imgName",tesk);//图片的路劲
                    //    formData.append("recId",teskd);//传入登录信息的id
                    //    formData.append("recType",lked);//rctype传入5000

                }
            }

        },
        created() {
            UserInfo().then(res => {
                this.user = res.data.data
            })

        }
    }
</script>

<style scoped>
    /* 头像的css */
    .metser {
        position: fixed;
        width: 100%;
        height: 100%;
        background: #333333b0;
        z-index: 99999999999999 !important;
    }

    .meste-name {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 200px;
        background: white;
    }

    .meste-name ul li {
        text-align: center;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #ddd;

    }

    .meste-name ul .upconte {
        color: red;
        font-size: 18px;
    }

    .me-list {
        border-bottom: 1px solid #F3F3F3;
        background-color: #ffffff;
        margin-top: 1px;
    }

    .me-list ul li {
        list-style: none;
        font-size: 16px;
    }

    .me-list ul li img {
        width: 20px;
        height: 20px;
        padding-right: 10px;
    }

    .sign {
        height: 175px;
        border-bottom: 10px solid #f9f9f9;
        width: 100%;
        padding-bottom: 25px;
    }

    .sign ul li {
        list-style: none;
        float: left;
        margin-top: 25px;
        font-size: 18px;
    }
</style>
